// 所有跟权限控制的代码写在这里，同步的代码会立刻执行

// 获取token
import { getToken } from './utils/auth'
// 导入路由
import router from '@/router'
// 导入vuex,拿到里面的方法
import store from '@/store'
// 安装一个插件，用来做进度条，做一个小优化
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 进度条样式
// 导入动态路由
import { asyncRoutes } from '@/router/asyncRouters'

// 创建一个白名单
const whiteList = ['/login', '/404']
// ----------------------前置路由守卫---------------------
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  const token = getToken()
  // 判断是否有token
  if (token) {
    // 如果有token，就跳转到主页
    if (to.path === '/login') {
      next('/')
    } else {
      next()
      // 在这里获取用户的资料
      if (!store.state.user.userInfo.userId) {
        // 如果userid不存在，表示没有请求过，这时才去触发这个方法
        const res = await store.dispatch('user/fetchUserInfo')
        // 权限控制
        // 1，拿到当前用户的menus权限数据 及 所有的动态路由表
        const menus = res.roles.menus // 我们需要的数组（左侧数据）
        // 2，以menus为主对asyncRoutes做过滤，找到复合条件的项[路由的name能否在menus中找到]
        const filterMenus = asyncRoutes.filter((route) => menus.includes(route.children[0].name))
        // 3，先把路由中的动态路由删掉，在这里筛选出来有资格的路由添加到路由系统中
        // 让访问path的时候可以渲染组件
        router.addRoutes(filterMenus) // addRoutes是专门用来做动态添加的方法
        // 4，调用store中的方法把组合好的路由表加入
        store.commit('menu/setMenuList', filterMenus)
      }
    }
  } else {
    // 如果没有token，再判断是否在白名单内，利用数组的includes方法检测括号里的内容是否在前面的白名单内
    if (whiteList.includes(to.path)) {
      // 在白名单就放行
      next()
    } else {
      // 不在就跳转登录页
      next('/login')
    }
  }
  // 结束进度条
  NProgress.done()
})
